<template>
	<div ref='body' class="body">
		<slot></slot>
		<div v-for="item in blank" :style="{width:width+'px'}">
		</div>
	</div>
</template>

<script>
	import {defineComponent,ref,inject,onMounted} from 'vue';
	export default defineComponent({
		setup(props){
			//父元素
			var body=ref()
			//替补个数
			let blank=ref(0)
			var width=ref(0)
			//更新子元素宽度
			function updateSon(){
				if(!body.value) return;
				var Bodywidth=body.value.offsetWidth;
				var sonWidth=body.value.children[0].offsetWidth
				width.value=sonWidth
				blank.value=parseInt(Bodywidth/sonWidth)-1;
			}
			onMounted(()=>{
				updateSon()
				window.addEventListener('resize',(function(){
					let  flag=true;
					return function(){
						if(flag){
							updateSon()
							flag=false;
							setTimeout(()=>{
								flag=true;
								updateSon()
							},1000)
							return;
						}else{
							return;
						}
					}
				})()
				);
			})
			return{
				width,
				body,
				blank
			}
		}
	})
</script>

<style scoped="scoped">
	.body{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
</style>
